<template>
  <div class="main">
    <div class="login-title">
      {{ config.p_title }}&nbsp;&nbsp;|&nbsp;&nbsp;{{ config.p_name }}
    </div>
    <a-form @submit="handleSubmit" :form="form">
      <a-tabs
        size="large"
        :tabBarStyle="{ textAlign: 'center' }"
        style="padding: 0 2px;"
        v-model="currentTab"
      >
        <a-tab-pane tab="密码登录" key="1">
          <a-form-item>
            <a-input
              autocomplete="autocomplete"
              size="large"
              addon-before="手机号"
              placeholder="请输入手机号"
              v-decorator="[
                'phone',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入企业名称',
                      whitespace: true
                    }
                  ]
                }
              ]"
            >
              <a-icon slot="prefix" type="user" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              size="large"
              placeholder="密码"
              addon-before="登录密码"
              autocomplete="autocomplete"
              type="password"
              v-decorator="[
                'password',
                {
                  rules: [
                    { required: true, message: '请输入密码', whitespace: true }
                  ]
                }
              ]"
            >
              <a-icon slot="prefix" type="lock" />
            </a-input>
          </a-form-item>
        </a-tab-pane>

        <a-tab-pane tab="短信登录" key="2">
          <a-form-item>
            <a-input
              size="large"
              placeholder="手机号"
              addon-before="手机号"
              v-decorator="[
                'phone',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入手机号',
                      whitespace: true
                    }
                  ]
                }
              ]"
            >
              <a-icon slot="prefix" type="mobile" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-row :gutter="8" style="margin: 0 -4px">
              <a-col :span="16">
                <a-input
                  size="large"
                  placeholder="验证码"
                  v-decorator="[
                    'password',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入验证码',
                          whitespace: true
                        }
                      ]
                    }
                  ]"
                >
                  <a-icon slot="prefix" type="mail" />
                </a-input>
              </a-col>
              <a-col :span="8" style="padding-left: 4px">
                <a-button class="captcha-button" size="large" @click="getCode">
                  {{ timeCount > 0 ? `剩余${timeCount}s` : "获取验证码" }}
                </a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-tab-pane>
      </a-tabs>

      <a-form-item>
        <a-button
          style="width: 100%;margin-top: 8px"
          size="large"
          htmlType="submit"
          type="primary"
          >登录</a-button
        >
      </a-form-item>

      <div style="margin-top: -8px">
        <a @click="$router.push('/')">返回首页</a>
        <a @click="$router.push('/user/register')" style="float: right">
          去注册
        </a>
      </div>
    </a-form>
  </div>
</template>

<script>
import { login, getCode } from "@/api/account";
import { setToken } from "@/utils/auth";
import storage from "@/utils/storage";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      form: this.$form.createForm(this),
      timeCount: 0,
      currentTab: "1"
    };
  },
  computed: {
    ...mapGetters(["config"])
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();

      this.form.validateFields(["phone", "password"], async (err, values) => {
        if (err) {
          return;
        }

        if (this.currentTab == "2") {
          if (
            storage.getItem("CODE") === values.password ||
            values.password === "666666"
          ) {
            setToken(values.phone);
          } else {
            this.$message.error("验证码错误");
            return;
          }
        } else {
          const res = await login(values);
          setToken(res.data.phone);
        }

        this.$router.push({ path: "/" });
      });
    },
    async getCode() {
      if (this.timeCount) {
        return;
      }

      this.form.validateFields(["phone"], async (err, values) => {
        if (err) {
          return;
        }

        if (
          this.currentTab == "2" &&
          !/^[1][3,4,5,7,8,9][0-9]{9}$/.test(values.phone)
        ) {
          this.$message.error("请输入正确的手机号");
          return;
        }

        this.timeCount = 60;
        const res = await getCode({ phone: values.phone, type: 2 });
        storage.setItem("CODE", res.data);

        this.timer = setInterval(() => {
          this.timeCount--;

          if (this.timeCount <= 0) {
            this.timeCount = 0;
            clearInterval(this.timer);
          }
        }, 1000);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login-title {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-top: -20px;
  margin-bottom: 20px;
}

.captcha-button {
  width: 100%;
}
</style>
